﻿<!DOCTYPE html>
<html lang="en">
<nav th:replace="shop/include::shopHeader"></nav>
<body class="product-page">
<!--[if lt IE 8]>
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]--> 
  <nav th:replace="shop/include::shopTop"></nav>
  <!-- Breadcrumbs End --> 
  <!-- Main Container -->
  <div class="main-container col1-layout">
  <div class="container">
    <div class="row">
      <div class="col-main">
        <div class="product-view-area">
          <div class="product-big-image col-xs-12 col-sm-5 col-lg-5 col-md-5">
            <div class="large-image">
            <a class="cloud-zoom" id="zoom1" rel="useWrapper: false, adjustY:0, adjustX:20">
              <img class="zoom-img" th:src="${'/files/' + goods.thumbnailImage}" alt="products"> 
            </a> 
            </div>
            <div class="flexslider flexslider-thumb">
              <ul class="previews-list slides">
                <li th:each="image:${goods.goodsImageList}">
	                	<a th:href="${'/files/'+image.imageLarge}" class='cloud-zoom-gallery' 
	                		th:attr="rel=|useZoom: 'zoom1', smallImage: '/files/${image.imageLarge}'|" >
	                		<img th:src="${'/files/'+image.imageLarge}" alt = "Thumbnail 1"/>
	                	</a>
                	</li>
                	<!--  
                <li><a href='/shop/images/products/img02.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: '/shop/images/products/img02.jpg' "><img src="/shop/images/products/img02.jpg" alt = "Thumbnail 1"/></a></li>
                <li><a href='/shop/images/products/img03.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: '/shop/images/products/img03.jpg' "><img src="/shop/images/products/img03.jpg" alt = "Thumbnail 2"/></a></li>
                <li><a href='/shop/images/products/img04.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: '/shop/images/products/img04.jpg' "><img src="/shop/images/products/img04.jpg" alt = "Thumbnail 2"/></a></li>
              	-->
              </ul>
            </div>
            <!-- end: more-images --> 
          </div>
          <div class="col-xs-12 col-sm-7 col-lg-7 col-md-7 product-details-area">
       
              <div class="product-name">
                <h1 th:text="${goods.title}"></h1>
              </div>
              <div class="price-box">
                <p class="special-price"> <span class="price-label">Special Price</span> <span class="price" th:text="${'￥'+ #numbers.formatDecimal(goods.salePrice * 0.01, 1, 2) }"></span> </p>
                <p class="old-price"> <span class="price-label">Regular Price:</span> <span class="price" th:if="${goods.marketPrice > 0}"  th:text="${'￥'+ #numbers.formatDecimal(goods.marketPrice * 0.01, 1, 2) }"> $359.99 </span> </p>
              </div>
              <div class="short-description">
                <h2></h2>
                <p th:text="${goods.subject}"></p>
              </div>
              <div class="product-color-size-area">
                <div class="color-area">
                  <div class="color">
                  </div>
                </div>
              </div>
              <div class="product-variation">
                <form action="#" method="post">
                  <div class="cart-plus-minus">
                  </div>
                  <button class="button pro-add-to-cart" title="加入购物车" type="button" th:onclick="'javascript:addCart(\''+${goods.id}+'\')'"><span><i class="fa fa-shopping-cart"></i> 加入购物车 </span></button>
                </form>
              </div>
              <div class="product-cart-option">
              </div>
          </div>
        </div>
      </div>
      <div class="product-overview-tab">
        <div class="container">
          <div class="row">
            <div class="col-xs-12"><div class="product-tab-inner"> 
              <ul id="product-detail-tab" class="nav nav-tabs product-tabs">
                <li class="active"> <a href="#description" data-toggle="tab"> 商品介绍 </a> </li>
              </ul>
              <div id="productTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="description">
                  <div class="std">
                  	<p th:utext="${goods.description}"></p>
                  </div>
                </div>
              </div>
            </div>
          </div></div>
        </div>
      </div>
    </div>
  </div>
</div>

 <!-- Footer -->
<nav th:replace="shop/include::shopFooter"></nav>
<!-- End Footer --> 
<!-- JS --> 
<!-- jquery js --> 
<script type="text/javascript" src="/shop/js/jquery.min.js"></script> 
<!-- bootstrap js --> 
<script type="text/javascript" src="/shop/js/bootstrap.min.js"></script> 
<!-- owl.carousel.min js --> 
<script type="text/javascript" src="/shop/js/owl.carousel.min.js"></script> 
<!-- bxslider js --> 
<script type="text/javascript" src="/shop/js/jquery.bxslider.js"></script> 
<!-- flexslider js --> 
<script type="text/javascript" src="/shop/js/jquery.flexslider.js"></script> 
<!-- megamenu js --> 
<script type="text/javascript" src="/shop/js/megamenu.js"></script> 
<script type="text/javascript">
  /* <![CDATA[ */   
  var mega_menu = '0';
  
  /* ]]> */
  </script> 

<!-- jquery.mobile-menu js --> 
<script type="text/javascript" src="/shop/js/mobile-menu.js"></script> 

<!--jquery-ui.min js --> 
<script type="text/javascript" src="/shop/js/jquery-ui.js"></script> 

<!-- main js --> 
<script type="text/javascript" src="/shop/js/main.js"></script> 

<!-- countdown js --> 
<script type="text/javascript" src="/shop/js/countdown.js"></script> 

<!--cloud-zoom js --> 
<script type="text/javascript" src="/shop/js/cloud-zoom.js"></script>
<script type="text/javascript" src="/js/plugins/layer/layer.js"></script>
<script type="text/javascript">
function addCart(id){
	$.ajax({
		type : "POST",
		url : "/shop/shopping_cart/add",
		data : JSON.stringify({"goodsId":id}),// 你的formid
		contentType:"application/json",
        dataType : "json",
		success : function(r) {
			if (r.code == 0) {
				layer.msg("购物车加入成功");
				loadShoppingCartNum();
			} else {
				layer.msg(r.msg);
			}
		}
	});
}
function loadShoppingCartNum(){
	$.ajax({
		type : "GET",
		url : "/shop/shopping_cart/total_number",
		data : {},// 你的formid
		contentType:"application/json",
        dataType : "json",
		success : function(r) {
			if (r.code == 0) {
				$("#shoppingCartNum").html("共"+r.msg+"件商品");
			} else {
				layer.msg(r.msg);
			}
		}
	});
}
loadShoppingCartNum();
</script>
</body>
</html>
